<template>
  <div
    class="relative flex flex-col w-full"
    :class="[
      'p-' + info.extension.padding.value,
      'mt-' + (info.extension.topMargin && info.extension.topMargin.value),
      'mr-' + (info.extension.rightMargin && info.extension.rightMargin.value),
      'mb-' + (info.extension.bottomMargin && info.extension.bottomMargin.value),
      'ml-' + (info.extension.leftMargin && info.extension.leftMargin.value),
    ]"
    :style="{
      height: `${info.extension.boxHeight.value}px`,
      background: `url('${info.extension.backgroundImg.value}')`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'cover',
      backgroundColor: 'rgba(0,0,0,0)',
    }"
  >
    <div
      v-if="info.extension.showBrage.value"
      class="border-t-2 border-l-2 absolute top-0 left-0 w-0.5 h-0.5 bg-transparent border-solid bradge"
      :style="`border-top-left-radius: ${info.extension.brageRotate.value}px;width: ${info.extension.brageWidth.value}px; height: ${info.extension.brageLine.value}px; border-color: ${info.extension.brageColorLeftTop.value}`"
    ></div>
    <div
      v-if="info.extension.showBrage.value"
      class="border-t-2 border-r-2 absolute right-0 top-0 w-0.5 h-0.5 bg-transparent border-solid bradge"
      :style="`border-top-right-radius: ${info.extension.brageRotate.value}px;width: ${info.extension.brageWidth.value}px; height: ${info.extension.brageLine.value}px; border-color: ${info.extension.brageColorRightTop.value}`"
    ></div>
    <div
      v-if="info.extension.showBrage.value"
      class="border-b-2 border-l-2 absolute left-0 bottom-0 w-0.5 h-0.5 bg-transparent border-solid bradge"
      :style="`border-bottom-left-radius: ${info.extension.brageRotate.value}px;width: ${info.extension.brageWidth.value}px; height: ${info.extension.brageLine.value}px; border-color: ${info.extension.brageColorLeftBottom.value}`"
    ></div>
    <div
      v-if="info.extension.showBrage.value"
      class="border-b-2 border-r-2 absolute right-0 bottom-0 w-0.5 h-0.5 bg-transparent border-solid bradge"
      :style="`border-bottom-right-radius: ${info.extension.brageRotate.value}px;width: ${info.extension.brageWidth.value}px; height: ${info.extension.brageLine.value}px; border-color: ${info.extension.brageColorRightBottom.value}`"
    ></div>
    <div
      class="flex align-center h-full"
      :class="['justify-' + info.extension.justifyAlign.value, 'items-' + info.extension.itemsAlign.value]"
      :style="{
        margin: `${info.extension.titleTopMargin.value}px ${info.extension.titleRightMargin.value}px ${info.extension.titleBottomMargin.value}px ${info.extension.titleLeftMargin.value}px`,
        padding: `${info.extension.titleTopPadding.value}px ${info.extension.titleRightPadding.value}px ${info.extension.titleBottomPadding.value}px ${info.extension.titleLeftPadding.value}px`,
        fontSize: `${info.extension.titleFontSize.value}px`,
        color: `${info.extension.titleColor.value}`,
        fontWeight: `${info.extension.titleFontWeight.value}`,
        backgroundColor: `${info.extension.titleBgColor.value}`,
        borderRadius: `${info.extension.titleRadius.value}px`,
        alignItems: info.extension.itemsAlign?.value,
      }"
    >
      {{ time }}
    </div>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import { UiMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiTimeCard',
    mixins: [UiMixin],
    data() {
      return {
        time: '',
      }
    },
    computed: {
      dateCenter() {
        let flag = this.info.extension.dateCenter?.value == '-' ? true : false
        return flag
      },
    },
    mounted() {
      this.getTitle()
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.time = this.getTitle()
      }, 1000)
    },
    unmounted() {
      this.timer && clearInterval(this.timer)
    },
    methods: {
      translateTitle,
      getTitle() {
        let date = new Date()
        let week = ''
        switch (date.getDay()) {
          case 1:
            week = this.translateTitle('Ve.layout.星期一')
            break
          case 2:
            week = this.translateTitle('Ve.layout.星期二')
            break
          case 3:
            week = this.translateTitle('Ve.layout.星期三')
            break
          case 4:
            week = this.translateTitle('Ve.layout.星期四')
            break
          case 5:
            week = this.translateTitle('Ve.layout.星期五')
            break
          case 6:
            week = this.translateTitle('Ve.layout.星期六')
            break
          case 0:
            week = this.translateTitle('Ve.layout.星期日')
            break
        }
        return (
          `${date.getFullYear()}${this.dateCenter ? '-' : this.translateTitle('Ve.layout.年') + ' '}${
            date.getMonth() >= 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
          }${this.dateCenter ? '-' : this.translateTitle('Ve.layout.月') + ' '}${date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()}${
            this.dateCenter ? '' : this.translateTitle('Ve.layout.日') + ' '
          } ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}${this.dateCenter ? ':' : this.translateTitle('Ve.layout.时') + ' '}${
            date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
          }${this.dateCenter ? ':' : this.translateTitle('Ve.layout.分')}${date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()}${
            this.dateCenter ? '' : this.translateTitle('Ve.layout.秒') + ' '
          }` + (this.info.extension?.haveWeek.value ? ' ' + week : '')
        )
      },
    },
  })
</script>
<style>
  .uiTitleCard {
    width: 100%;
  }
</style>
